pre code {
  display: block; padding: 0.5em;
  color: #333;
}

%key-like {
  color: #008080
}

%value-like {
  color: #d14;
}

pre .jsonlike {
  .comment {
    color: #998;
    font-style: italic
  }

  // style as keys: keys (i.e. .attribute) and strings that
  // can't be explicitly determined to be keys or values
  // (which some of our technically-invalid-json examples have)
  .attribute, .string {
    @extend %key-like;
  }

  .value .string {
    @extend %value-like;
  }
}

pre .http {
  // the request & response lines
  .request, .status {
    font-weight: bold;
  }

  // the request uri and header values
  .string {
    @extend %value-like;
  }

  // header names and the status code
  .attribute, .ne .status, .status .number {
    @extend %key-like
  }

  // Sometimes pygments (stupidly) misidentifies an
  // http response body; don't let that confuse the styles.
  .sql .string {
    color: #333;
  }
}
